<template>
  <input
    class="inp"
    @input="handlerInput"
    @change="checkVal"
    v-model="inputVal"
    :class="{success:flag==='success',error:flag=== 'fail'}"
  />
</template>

<script>
export default {
  data() {
    return {
      inputVal:'',
      flag: '',
    };
  },
  props: {
    rules: {
      type: RegExp,
    },
    err_message:{
      err_message:String
    }
  },
  methods: {
    handlerInput(e) {
      let v = e.target.value;
      console.log(this.type);
      
      if(!this.rules.test(v)){
           this.flag='fail'
      }else{
        this.flag='success'
      }
       console.log('this.$attrs.name',this.$attrs.name);
      this.$emit("input", {[this.$attrs.name]:this.inputVal});
    },
    checkVal(){
      if(this.flag==='fail'){
        this.$toast.fail(this.err_message)
      }
    }
  },
};
</script>

<style lang="less" scoped>
.inp {
  width: 90%;
  height: 40/540 * 100vw;
  line-height: 40/540 * 100vw;
  border: none;
  outline: none;
  border-bottom: 2px solid #ccc;
  font-size: 18/540 * 100vw;
  color: #888;
  display: block;
  margin: 50px auto;
}
.error {
  border-bottom-color: red;
}
.success {
  border-bottom-color: green;
}
</style>